<template>
  <div class="u-login-about-container forget-container">
      <ul class="forget-center">
        <li>
          <input type="tel" placeholder="请输入手机号码" maxlength="11" v-model="phone">
        </li>
        <li>
          <input type="tel" placeholder="请输入验证码" maxlength="4" v-model="authCode">
          <button class="u-send-msg-btn" v-if="!sendMsgFlag" @click="sendMsg" :disabled="sendMsgFlag">{{sendBtnText}}</button>
          <span class="times color-primary" v-if="sendMsgFlag">{{times}}</span>
        </li>
        <li>
          <input :type="inputType" placeholder="请输入6~16位数字字母组合密码" maxlength="16" v-model="password">
          <van-icon :name="iconName" :class="className" @click='changeInputType' />
        </li>
      </ul>
      <van-button round class="u-btn-default u-bg-gradient-light forget-btn" @click="sureFn()">确认</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: '', //手机号码
      authCode: '', //验证码
      password: '', //密码
      sendMsgFlag: false, //发送验证码按钮状态
      sendBtnText: '发送验证码', //发送验证码文字
      times: '60s', //倒计时文字
      changeInputTypeFlag: false, //修改input类型
      inputType: 'password', //input类型
      iconName: 'closed-eye', //图标
      className: 'inp-icon color-gray' //类名
    }
  },
  methods: {
    changeInputType() { //更换输入框类型
      this.changeInputTypeFlag = !this.changeInputTypeFlag;
      if(this.changeInputTypeFlag){
        this.inputType = 'text';
        this.iconName = 'eye';
        this.className = 'inp-icon color-primary';
      }else{
        this.inputType = 'password';
        this.iconName = 'closed-eye';
        this.className = 'inp-icon color-gray';
      }
    },

    sendMsg() { //发送验证码
      if(!this.$tool.validator.isEmpty(this.phone)){
        this.$tool.toast('请输入手机号')
        return;
      }

      if(!this.$tool.validator.isMobilePhone(this.phone)){ 
        this.$tool.toast('请输入正确的手机号')
        return; 
      }
      this.sendMsgAjax()
    },

    sendMsgAjax() {
      let postData = {
        phone: this.phone,
        smsType: 3
      }
      this.$api.post('/api/sms/send_sms', postData)
        .then((res) => {
          this.sendMsgFlag = true;
          this.countdown();
        })
    },

    countdown() { //倒计时
      let time = 60;
      let t = setInterval(() => {
          time--;
          this.times = `${time}s`;
          if(time <= 0){
            clearInterval(t)
            this.sendBtnText = '重新获取';
            this.sendMsgFlag = false;
            this.times = '60s';
          }
      }, 1000)
    },

    sureFn() { //确认
      if(!this.$tool.validator.isEmpty(this.phone)){
        this.$tool.toast('请输入手机号')
        return;
      }

      if(!this.$tool.validator.isMobilePhone(this.phone)){
        this.$tool.toast('请输入正确的手机号')
        return;
      }

      if(!this.$tool.validator.isEmpty(this.authCode)){
        this.$tool.toast('请输入验证码')
        return;
      }

      if(!this.$tool.validator.isMsgCode(this.authCode)){
        this.$tool.toast('请输入4位数字验证码')
        return;
      }

      if(!this.$tool.validator.isEmpty(this.password)){
        this.$tool.toast('请输入密码')
        return;
      }
      
      if(!this.$tool.validator.isPassword(this.password)){
        this.$tool.toast('请输入6~16位数字字母组合密码')
        return;
      }

      this.submitAjax()
    },

    submitAjax() {
      console.log('找回密码')
      let postData = {
        phone: this.phone,
        smsCode: this.authCode,
        pwd: this.$md5(this.password)
      }
      this.$api.post('/api/user/reset_pwd', postData)
        .then((res) => {
          this.$tool.toast('修改成功')
          setTimeout(() => {
            this.$router.push({path: '/loginByAccount'})
          }, 1500);
        })
    }
  },

  mounted() {
    this.$tool.addEventListenerInputFocusout()
  }
}
</script>

<style lang="scss" scoped>
  .forget-container {
    .forget-center {
      padding-top: 35px;
      li {
        display: flex;
        align-items: center;
        width: 100%;
        height: 60px;
        font-size: 16px;
        border-bottom: 1px solid #f2f2f2;
        input {
          height: 25px;
          flex: 1;
          font-size: 16px;
          outline: none;
          border: none;
          background-color: #fff;
        }
        .inp-icon {
          margin-left: 40px;
          font-size: 20px;
        }
        .times {
          margin-left: 40px;
        }
      }
    }
    .forget-btn {
      margin-top: 32px;
    }
  }
</style>